<template>
  <!-- 孪生运行组件 -->
  <div class="TwinOperation-box">
    <div class="TwinOperation-box-title">
      <BoxTitle />
    </div>
    <div class="TwinOperation-box-content">
      <!-- 总冲电量 -->
      <div class="TwinOperation-left">
        <div class="TwinOperation-cdl">
          <div class="tubiao"></div>
          <div class="wenzi">总充电量</div>
        </div>
        <div class="TwinOperation-JR">
          <div class="title">今日</div>
          <div class="wenzi digiTal1">+000000</div>
          <div class="danwei">mwh</div>
        </div>
        <div class="TwinOperation-JRCDL">
          <div class="wenzi digiTal1">00099900.00</div>
          <div class="danwei">mwh</div>
        </div>
      </div>
      <!-- 竖线 -->
      <div class="TwinOperation-centre"></div>
      <!-- 总放电量 -->
      <div class="TwinOperation-right">
        <div class="TwinOperation-cdl">
          <div class="tubiao"></div>
          <div class="wenzi">总放电量</div>
        </div>
        <div class="TwinOperation-JR">
          <div class="title">今日</div>
          <div class="wenzi digiTal1">+000000</div>
          <div class="danwei">mwh</div>
        </div>
        <div class="TwinOperation-JRCDL">
          <div class="wenzi digiTal1">00099900.00</div>
          <div class="danwei">mwh</div>
        </div>
      </div>
    </div>
    <div class="TwinOperation-title-left">
      <div class="BoxTitle-title-fangkuai"></div>
      <div class="BoxTitle-title-title">充放电曲线</div>
    </div>
    <div class="BoxTitle-echarts-box">
      <ChargeDischargeEcharts />
    </div>
    <div class="TwinOperation-title-jianpai">
      <div class="BoxTitle-title-fangkuai"></div>
      <div class="BoxTitle-title-title">节能减排</div>
    </div>
    <div class="TwinOperation-jianpai-box">
      <div class="jianpai-item">
        <div class="jianpai-tubiao"></div>
        <div class="jianpai-mingzi">减排SO2</div>
        <div class="jianpai-Num digiTal1">92.00000000</div>
        <div class="jianpai-danwei">t</div>
      </div>
      <div class="jianpai-item">
        <div class="zhishu-tubiao"></div>
        <div class="jianpai-mingzi">减排SO2</div>
        <div class="jianpai-Num digiTal1">92.0000</div>
        <div class="jianpai-danwei">棵</div>
      </div>
      <div class="jianpai-item">
        <div class="fenchen-tubiao"></div>
        <div class="jianpai-mingzi">减排SO2</div>
        <div class="jianpai-Num digiTal1">92.0000</div>
        <div class="jianpai-danwei">t</div>
      </div>
      <div class="jianpai-item">
        <div class="co2-tubiao"></div>
        <div class="jianpai-mingzi">减排SO2</div>
        <div class="jianpai-Num digiTal1">92.00000000</div>
        <div class="jianpai-danwei">t</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import BoxTitle from "./BoxTitle.vue"
import ChargeDischargeEcharts from "@/view/Twinoperation/ChargeDischargeEcharts.vue"
</script>
<style scoped lang="less">
.TwinOperation-box {
  width: 100%;
  height: 100%;
  background: url("@/assets/TwinSafety/tanchuang_luanshengyunxing.png")
    no-repeat center;
  background-size: 100% 100%;
  .TwinOperation-box-title {
    position: absolute;
    width: 100%;
    height: 88px;
    margin-top: 22px;
  }
  .TwinOperation-box-content {
    position: absolute;
    width: 100%;
    height: 67px;
    top: 110px;
    box-sizing: border-box;
    padding-left: 20px;
    display: flex;
    align-items: center;
    .TwinOperation-left {
      width: 220px;
      height: 67px;
      position: relative;
      .TwinOperation-cdl {
        position: absolute;
        top: 3px;
        width: 72px;
        height: 16px;
        display: flex;
        .tubiao {
          width: 11px;
          height: 16px;
          background: url("@/assets/TwinSafety/icon_zongchongdianliang.png")
            no-repeat center;
          background-size: 100% 100%;
        }
        .wenzi {
          font-weight: 600;
          font-size: 12px;
          color: #fff;
          margin-left: 3px;
        }
      }
      .TwinOperation-JR {
        width: 130px;
        height: 16px;
        position: absolute;
        right: 3px;
        top: 8px;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        .title {
          width: 32px;
          height: 16px;
          color: #fff;
          font-size: 12px;
          text-align: right;
        }
        .wenzi {
          width: 70px;
          height: 16px;
          line-height: 16px;
          font-size: 20px !important;
          color: goldenrod;
          text-align: right;
        }
        .danwei {
          width: 30px;
          height: 16px;
          font-size: 12px;
          line-height: 18px;
          text-align: right;
          color: goldenrod;
        }
      }
      .TwinOperation-JRCDL {
        position: absolute;
        top: 35px;
        width: 135px;
        height: 20px;
        display: flex;
        color: #fff;
        .wenzi {
          font-size: 24px;
          line-height: 20px;
        }
        .danwei {
          line-height: 26px;
          font-size: 12px;
        }
      }
    }
    .TwinOperation-centre {
      width: 2px;
      height: 47px;
      background-color: #818c9d;
    }
    .TwinOperation-right {
      margin-left: 5px;
      width: 220px;
      height: 67px;
      position: relative;
      .TwinOperation-cdl {
        position: absolute;
        top: 3px;
        width: 72px;
        height: 16px;
        display: flex;
        .tubiao {
          width: 11px;
          height: 16px;
          background: url("@/assets/TwinSafety/icon_zongfangdianliang.png")
            no-repeat center;
          background-size: 100% 100%;
        }
        .wenzi {
          font-weight: 600;
          font-size: 12px;
          color: #fff;
          margin-left: 3px;
        }
      }
      .TwinOperation-JR {
        width: 130px;
        height: 16px;
        position: absolute;
        right: 3px;
        top: 8px;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        .title {
          width: 32px;
          height: 16px;
          color: #fff;
          font-size: 12px;
          text-align: right;
        }
        .wenzi {
          width: 70px;
          height: 16px;
          line-height: 16px;
          font-size: 20px !important;
          color: goldenrod;
          text-align: right;
        }
        .danwei {
          width: 30px;
          height: 16px;
          font-size: 12px;
          line-height: 18px;
          text-align: right;
          color: goldenrod;
        }
      }
      .TwinOperation-JRCDL {
        position: absolute;
        top: 35px;
        width: 135px;
        height: 20px;
        display: flex;
        color: #fff;
        .wenzi {
          font-size: 24px;
          line-height: 20px;
        }
        .danwei {
          line-height: 26px;
          font-size: 12px;
        }
      }
    }
  }
  .TwinOperation-title-left {
    position: absolute;
    top: 170px;
    left: 20px;
    width: 100px;
    height: 35px;
    display: flex;
    align-items: center;
    .BoxTitle-title-fangkuai {
      width: 10px;
      height: 10px;
      background: url("@/assets/TwinSafety/icon_xiaobiaoti.png") no-repeat
        center;
      background-size: 120% 120%;
    }
    .BoxTitle-title-title {
      color: #fff;
      text-shadow: 2px 2px 2px #50729c;
      margin-left: 5px;
      font-size: 14px;
      font-weight: 600;
      width: 60px;
      white-space: nowrap;
    }
  }
  .BoxTitle-echarts-box {
    position: absolute;
    width: 100%;
    height: 130px;
    top: 200px;
  }
  .TwinOperation-title-jianpai {
    position: absolute;
    top: 355px;
    left: 20px;
    width: 100px;
    height: 35px;
    display: flex;
    align-items: center;
    .BoxTitle-title-fangkuai {
      width: 10px;
      height: 10px;
      background: url("@/assets/TwinSafety/icon_xiaobiaoti.png") no-repeat
        center;
      background-size: 120% 120%;
    }
    .BoxTitle-title-title {
      color: #fff;
      text-shadow: 2px 2px 2px #50729c;
      margin-left: 5px;
      font-size: 14px;
      font-weight: 600;
      width: 60px;
      white-space: nowrap;
    }
  }
  .TwinOperation-jianpai-box {
    position: absolute;
    width: 100%;
    height: 100px;
    top: 380px;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .jianpai-item {
      width: 205px;
      height: 35px;
      background-color: red;
      background: url("@/assets/TwinSafety/beijing_jienengjianpai.png")
        no-repeat center;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      .jianpai-tubiao {
        margin-left: 10px;
        width: 16px;
        height: 12px;
        background: url("@/assets/TwinSafety/icon_jianpaiSO2.png") no-repeat
          center;
        background-size: 100% 100%;
      }
      .zhishu-tubiao {
        margin-left: 10px;
        width: 16px;
        height: 12px;
        background: url("@/assets/TwinSafety/icon_dengxiaozhishu.png") no-repeat
          center;
        background-size: 100% 100%;
      }
      .fenchen-tubiao {
        margin-left: 10px;
        width: 16px;
        height: 12px;
        background: url("@/assets/TwinSafety/icon_jianpaitanfenchen.png")
          no-repeat center;
        background-size: 100% 100%;
      }
      .co2-tubiao {
        margin-left: 10px;
        width: 16px;
        height: 12px;
        background: url("@/assets/TwinSafety/icon_jianpaiCO2.png") no-repeat
          center;
        background-size: 100% 100%;
      }
      .jianpai-mingzi {
        color: #fff;
        font-size: 12px;
        margin-left: 5px;
      }
      .jianpai-Num {
        width: 100px;
        color: #fff;
        font-size: 20px;
        margin-left: 5px;
        text-align: right;
      }
      .jianpai-danwei {
        width: 10px;
        text-align: right;
        font-size: 10px;
        color: #fff;
      }
    }
  }
}
</style>
